<!--安全-特种设备-特种设备登记-->
<template>
    <Layout>
        <div v-if="statisticPage">
            <Form ref="form1" :model="dataToQuery" :label-width="120">
                <Row class="query-form">
                    <Col span="8">
                        <FormItem label="二级集团：">
                            <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="企业名称：" prop="order">
                            <Input v-model='dataToQuery.companyName' class="query-form-el"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                        <Button @click="reset" class="ivu-btn-reset">重置</Button>
                        <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                    </Col>
                </Row>
                <Row class="query-form">
                    <Col span="24">
                        <span v-if="isResult===1">
                            <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                            <Button size="large" class="ivu-btn-add" icon="md-download" @click="downloadDescriptionExcel">导出模板</Button>
                            <Button size="large" class="ivu-btn-add" icon="md-cloud-upload" @click="beachUpload">批量导入</Button>
                        </span>
                        <!--<Button size="large" class="ivu-btn-add" icon="md-cloud-download" :loading="buttonLoading" @click="exportFormSubmit">导出</Button>-->
                    </Col>
                </Row>
            </Form>
        </div>
        <div v-else>
            <Form ref="form1" :model="dataToQuery" :label-width="120">
                <Row class="query-form">
                    <Col span="8">
                        <FormItem label="企业名称：" prop="order">
                            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
														           @setOrgname='(data)=>{dataToQuery.companyName=data}'
                                          :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}">
                            </cascader-dom>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label='设备分类：'>
                            <Select v-model="dataToQuery.categoryId" class="query-form-el">
                                <Option v-for="item in dictMap.categoryList" :value="item.codingCodeId" :key="item.index" :label="item.codingName">
                                    {{item.codingName}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8" v-if="!switchFlag">
                        <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                        <Button @click="reset" class="ivu-btn-reset">重置</Button>
                        <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                    </Col>
                    <Col span="8" v-else>
                        <FormItem label="设备名称：" prop="eqName">
                            <Input v-model='dataToQuery.eqName' class="query-form-el"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row v-show="switchFlag" class="query-form">
                    <Col span="8">
                        <FormItem label="填表时间：" prop="content">
                            <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd"
                                        type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                        @on-change="onSelectQueryDateRange"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="制造单位：" prop="manufacture">
                            <Input v-model='dataToQuery.manufacture' class="query-form-el"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                        <Button @click="reset" class="ivu-btn-reset">重置</Button>
                        <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                    </Col>
                </Row>
                <Row class="query-form">
                    <Col span="24">
                        <span v-if="isResult===1">
                            <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                            <!--<Button size="large" class="ivu-btn-add" icon="md-download" @click="downloadDescriptionExcel">导出模板</Button>-->
                            <!--<Button size="large" class="ivu-btn-add" icon="md-cloud-upload" @click="beachUpload">批量导入</Button>-->
                        </span>
                        <download-button :api="exportUrl" :queryForm="dataToQuery" />
                        <!-- <Button size="large" class="ivu-btn-add" icon="md-cloud-download" :loading="buttonLoading" @click="exportFormSubmit">导出</Button> -->
                        <Button size="large" class="ivu-btn-add" icon="md-arrow-back"  @click="goback">返回</Button>
                    </Col>
                </Row>
            </Form>
            <!--<Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!"-->
                   <!--:loading='pageStatus.loading' border :columns="columns1" :data="dataTable" :row-class-name="rowClassName">-->
            <!--</Table>-->
        </div>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!"
            @on-sort-change="sortChange"
               :loading='pageStatus.loading' border :columns="statisticPage?columns2:columns1" :data="dataTable" :row-class-name="rowClassName">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange"
                      @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                      show-elevator/>
            </Col>
        </Row>

        <Modal title="特种设备登记" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'684px'}" class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?120:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='企业名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId="dataToView.companyId"
                                                  :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}">
                                    </cascader-dom>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='所在省市：' prop='companyAddress'>
                                    <div v-if="mode === 'view'">{{areaCodeToAreaName(dataToView.companyAddress)}}</div>
                                    <Cascader v-else :data="tempAreaTree" v-model="dataToView.companyAddressArr" change-on-select :transfer="true"
                                              :load-data="areaTreeLoadData" :render-format="labels=>labels.join('·')"  :clearable='false'
                                              @on-change="(value,selectedData)=>{$set(dataToView,'companyAddress',value.join(','))}"></Cascader>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='设备分类：' prop='categoryId'>
                                    <div v-if="mode === 'view'">{{dataToView.categoryName}}</div>
                                    <Select v-else v-model="dataToView.categoryId">
                                        <Option v-for="item in dictMap.categoryList" :value="item.codingCodeId" :key="item.index" :label="item.codingName">
                                            {{item.codingName}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='设备名称：' prop='eqName'>
                                    <div v-if="mode === 'view'">{{dataToView.eqName}}</div>
                                    <Input v-else type='text' v-model='dataToView.eqName'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='规格型号：' prop='eqModel'>
                                    <div v-if="mode === 'view'">{{dataToView.eqModel}}</div>
                                    <Input v-else type='text' v-model='dataToView.eqModel'></Input>
                                    <!--<Select v-else v-model="dataToView.eqModel" filterable allow-create @on-create="(val)=>{dictMap.eqModelList.push({name: val})}">-->
                                    <!--<Option v-for="item in dictMap.eqModelList" :value="item.name" :key="item.index" :label="item.name">{{item.name}}</Option>-->
                                    <!--</Select>-->
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='制造单位：' prop='manufacture'>
                                    <div v-if="mode === 'view'">{{dataToView.manufacture}}</div>
                                    <Input v-else type='text' v-model='dataToView.manufacture'></Input>
                                    <!--<Select v-else v-model="dataToView.manufacture" filterable allow-create @on-create="(val)=>{dictMap.manufactureList.push({name: val})}">-->
                                    <!--<Option v-for="item in dictMap.manufactureList" :value="item.name" :key="item.index" :label="item.name">{{item.name}}</Option>-->
                                    <!--</Select>-->
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='产品合格证号：' prop='certificationNum'>
                                    <div v-if="mode === 'view'">{{dataToView.certificationNum}}</div>
                                    <Input v-else type='text' v-model='dataToView.certificationNum'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='使用许可证号：' prop='licenceNum'>
                                    <div v-if="mode === 'view'">{{dataToView.licenceNum}}</div>
                                    <Input v-else type='text' v-model='dataToView.licenceNum'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='设备注册证号：' prop='registerNum'>
                                    <div v-if="mode === 'view'">{{dataToView.registerNum}}</div>
                                    <Input v-else type='text' v-model='dataToView.registerNum'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='投用日期：' prop='startDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.startDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%"
                                                v-model='dataToView.startDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="安装位置：" prop="coordSite">
                                    <div v-if="mode === 'view'">{{dataToView.coordSite}}</div>
                                    <Input v-else type="text" v-model="dataToView.coordSite"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="使用状况：" prop="useStatus">
                                    <div v-if="mode === 'view'">{{dataToView.useStatus}}</div>
                                    <Input v-else type="text" v-model="dataToView.useStatus"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='定检日期：' prop='examDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.examDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%"
                                                v-model='dataToView.examDate'></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="检验周期：" prop="examCycle">
                                    <div v-if="mode === 'view'">{{dataToView.examCycleName}}</div>
                                    <Select v-else v-model="dataToView.examCycle">
                                        <Option v-for="item in dictMap.examCycleList" :value="item.codingCodeId"
                                                :key="item.index" :label="item.codingName">
                                            {{item.codingName}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='检验结果：' prop='examResult'>
                                    <div v-if="mode === 'view'">{{dataToView.examResult}}</div>
                                    <Input v-else type='text' v-model='dataToView.examResult'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%"
                                                class="query-form-el" v-model='dataToView.createDate' readonly></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表人电话：' prop='createMobile'>
                                    <div v-if="mode === 'view'">{{dataToView.createMobile}}</div>
                                    <Input v-else type='text' v-model='dataToView.createMobile'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='备注：' prop='notes'>
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else type='textarea' v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save'
                        @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

        <Modal :transfer=false v-model="model3" :width=700 title="特种设备导入" @on-cancel="cancelMap">
            <Form  ref="map" :show-message="false" :model="map" :rules="mapRuleCustom" label-position="top">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label='企业名称：' prop='companyId'>
                            <cascader-dom ref='orgCascader1' @setOrgInfo='setCompanyId1' @setOrgname="setCompanyName1"
                                          :orgTree="true" :currentOrgId="currentUser.companyId">
                            </cascader-dom>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label='设备分类：' prop='categoryId'>
                            <Select v-model="map.categoryId">
                                <Option v-for="item in dictMap.categoryList" :value="item.codingCodeId" :key="item.index" :label="item.codingName">
                                    {{item.codingName}}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem  label="特种设备excel文件" prop="file">
                             <div>
                                 <Upload ref="upload1"
                                         :before-upload="handleUpload "
                                         :format="['xlsx', 'xls']"
                                         accept=".xlsx, .xls"
                                         :max-size="10240"
                                         type="drag"
                                         :action="uploadUrl">
                                     <div style="padding: 10px">
                                         <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                         <p>点击将文件拖拽到这里上传</p>
                                         <span style="font-size:8px;color: #797a64">仅支持上传单个excel </span>
                                     </div>
                                 </Upload>
                             </div>
                            <div v-if="fileTrue">
                                <a>{{ map.file.name }}</a>
                                <Button type="text" icon="md-trash" @click="map.file = {},fileTrue = false" style="margin-left: 5px;margin-bottom: 3px"/>
                            </div>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-save' :disabled="uploadDissabled" @click="submitFile('map')">确定</Button>
                <Button type="primary" class='ivu-btn-cancel' @click="cancelMap">取消</Button>
            </div>
        </Modal>

        <Modal title="导入详情" v-model="logInfoModel" :transfer=false :mask-closable="false">
            <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                    <div v-html="logInfo"></div>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-cancel' @click="logInfoModel=false,logInfo=null">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {mapState, mapGetters, mapActions} from 'vuex'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '@/common/cacheUtils.js'

    export default {
        components: {cascaderDom},
        computed: {
            ...mapState('trhg', {
                areaMap: state => state.area.areaMap ? state.area.areaMap : [],
                areaTreeMap: state => state.area.areaTreeMap?state.area.areaTreeMap:{},
            }),
            isResult() {
                return this.$route.name ==='specialEqSafeRpt'? 1 : 2 //eqAccountPending 1、查询列表  2、查询待审列表
            },
            // columns1() {  //动态处理表头
            //     const columns = [...this.columns];
            //     const columns1 = []
            //     columns.forEach(item => {
            //         if (this.isResult === 'greenMine') {
            //             columns1.push(item)
            //         } else {
            //             if (item.key !== 'mineName' && item.key !== 'proCreatePlanYear' && item.key !== 'nationalCreatePlanYear') {
            //                 columns1.push(item)
            //             }
            //         }
            //     })
            //     return columns1
            // },
        },
        data() {
            return {
                ...this.createCommonDataField(),
                statisticPage: true,
                columns1: [
                    {title: '序号', width: 65, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {key: 'companyName', title: '企业名称', align: 'center', width: 200},
                    {key: 'companyAddress', title: '所在省市', align: 'center', width: 140, render: this.renderCellArea},
                    {key: 'categoryName', title: '设备类型', align: 'center', width: 150},
                    {key: 'eqName', title: '设备名称', align: 'center', width: 150},
                    {key: 'eqModel', title: '规格型号', align: 'center', width: 160},
                    {key: 'manufacture', title: '制造单位', align: 'center', width: 150},
                    {key: 'certificationNum', title: '产品合格证号', align: 'center', width: 140},
                    {key: 'licenceNum', title: '使用许可证号', align: 'center', width: 150},
                    {key: 'registerNum', title: '设备注册证号', align: 'center', width: 200},
                    {key: 'startDate', title: '投用日期', sortable: "custom", align: 'center', width: 120, render: this.renderCellDate},
                    {key: 'examDate', title: '定检日期', sortable: "custom", align: 'center', width: 120, render: this.renderCellDate},
                    {key: 'examResult', title: '检验结果', align: 'center', width: 120, tooltip: true},
                    {key: 'examCycleName', title: '检验周期', align: 'center', width: 120},
                    {key: 'coordSite', title: '安装位置', align: 'center', width: 120, tooltip: true},
                    {key: 'useStatus', title: '使用状况', align: 'center', width: 120, tooltip: true},
                    {key: 'createDate', title: '填表时间', sortable: "custom", align: 'left', width: 120, render: this.renderCellDate},
                    {key: 'notes', title: '备注', align: 'center', width: 120, tooltip: true},
                    // this.getActionColumns(),
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            let flag = this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId  || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined
                            if (this.isResult ===1) {
                                return h('div', [
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {
                                            fontSize: '14px',
                                        },
                                        on: {
                                            click: () => {
                                                this.viewData(params);
                                            }
                                        }
                                    }, '详情'),
                                    h('Divider', {props: {type: 'vertical'}}, ''),
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        disabled: true,
                                        style: {
                                            fontSize: '14px',
                                            color: flag? '': '#d0d0d0',
                                            pointerEvents:flag ? '': 'none',
                                        },
                                        on: {
                                            click: () => {
                                                this.editData(params);
                                            }
                                        }
                                    }, '修改'),
                                    h('Divider', {props: {type: 'vertical'}}, ''),
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {
                                            fontSize: '14px',
                                            color: flag? 'red': '#d0d0d0',
                                            pointerEvents:flag ? '': 'none',
                                        },
                                        on: {
                                            click: () => {
                                                this.deleteData(params);
                                            }
                                        }
                                    }, '删除')
                                ])
                            } else {
                                return h('div', [
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {
                                            fontSize: '14px',
                                        },
                                        on: {
                                            click: () => {
                                                this.viewData(params);
                                            }
                                        }
                                    }, '详情'),
                                    h('Divider', {props: {type: 'vertical'}}, ''),
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        disabled: true,
                                        style: {
                                            fontSize: '14px',
                                            color: flag? '': '#d0d0d0',
                                            pointerEvents:flag ? '': 'none',
                                        },
                                        on: {
                                            click: () => {
                                                this.editData(params);
                                            }
                                        }
                                    }, '修改'),
                                ])
                            }
                        }
                    }
                ],
                columns2: [
                    {title: '序号', width: 65, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {key: 'companyName', title: '企业名称', align: 'center', minWidth: 200},
                    {key: 'companyAddressName', title: '所在省市', align: 'center', minWidth: 140},
                    {key: 'str', title: '设备信息', align: 'center', minWidth: 160, tooltip:true},
                    {key: 'belongOrgName', title: '二级集团', align: 'center', minWidth: 150},
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {type: 'primary', size: 'small'},
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.statisticPage = false
                                            // this.dataToQuery.companyName = params.row.companyName
                                            this.dataToQuery.companyName = params.row.orgName
                                            this.dataToQuery.companyId = params.row.companyId
                                            this.query()
                                        }
                                    }
                                }, '详情'),
                            ])
                        }
                    }
                ],
                ruleCustom: {
                    companyId: [{required: true, message: ' ', trigger: 'change'}],
                    categoryId: [{required: true, message: ' ', trigger: 'change'}],
                    companyAddress: [{required: true, message: ' ', trigger: 'change'}],
                    eqName: [{required: true, message: ' ', trigger: 'change'}],
                    createMobile: [{
                        pattern: /^((0\d{2,3}-\d{7,8})|(1[123456789]\d{9}))$/,
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }],
                    examDate: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }],
                    examCycle: [{required: true, message: ' ', trigger: 'change'}],
                },
                tableHeight: 10,
                dictMap: {},
                buttonLoading: false,
                fileTrue:false,
                uploadDissabled:false,
                map:{},
                mapRuleCustom: {
                    companyId: [{required: true, message: ' ', trigger: 'change'}],
                    categoryId: [{required: true, message: ' ', trigger: 'change'}],
                    file: [{
                        validator: (rule, value, callback) => {
                            if (this.map.file) {
                                callback()
                            } else {
                                callback(' ')
                            }
                        },
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }]
                },
                model3:false,
                currentUser: sessionStorage('userId').getObject('userId'),
                // api
                queryUrl: Api.querySafeRptSpecialEq,
                exportUrl: Api.exportSafeRptSpecialEq,
                deleteUrl: Api.deleteSafeRptSpecialEq,
                bthDeleteUrl: Api.batchDeleteSafeRptSpecialEq,
                getUrl: Api.getSafeRptSpecialEq,
                updateUrl: Api.updateSafeRptSpecialEq,
                saveUrl: Api.saveSafeRptSpecialEq,
                uploadUrl:Api.uploadSafeRptSpecialEq,

                logInfoModel:false,
                logInfo:null
            }
        },
        async mounted() {
            this.divHeight = window.innerHeight - 135 + 'px';
            this.setTableHeight();
            this.pageStatus.baseLoading = true
            await this.$store.dispatch('trhg/area/query', {scope: this}, {root: true})
            this.pageStatus.baseLoading = false
            await this.$http.get(Api.queryCodeDetailBySortId + '/IP-10001', {params: {}}).then((res) => {
                this.dictMap.examCycleList = res.data.data
            });
            await this.$http.get(Api.queryCodeDetailBySortId + '/eq-00001', {params: {}}).then((res) => {
                this.dictMap.categoryList = res.data.data
            });
            // dictMap.manufactureList   dictMap.eqModelList
            this.query();
            this.tempAreaTree = this.areaTreeMap['0']
        },
        methods: {
            ...pageCommonFunction,
            createEmptyDataToAdd() {
                return {
                    companyAddressArr: [],
                    createMobile: this.currentUser.mobileNumber,
                }
            },
            beforeEditDialogOpen(data) {
                if(data.row.companyAddress){
                    data.row.companyAddressArr = data.row.companyAddress.split(',')
                    data.row.companyAddressName = this.areaCodeToAreaName(data.row.companyAddress)
                }
            },
            async afterDataToViewInit(data) {
                if (data && data.companyAddress) {
                    let companyAddressArr = data.companyAddress.split(',')
                    this.tempAreaTree = []
                    setTimeout(() => {
                        this.tempAreaTree = this.addressEditArr(this.areaTreeMap,companyAddressArr)
                    }, 100)
                }
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            goback(){
                this.statisticPage = true
                this.dataToQuery = {}
                this.query()
            },
            query() {
                this.queryUrl = this.statisticPage?Api.querySafeRptSpecialEq+'/page':Api.querySafeRptSpecialEq
                this.dataToQuery.listType = this.isResult
								this.dataToQuery.statistics = 'statistics' //统计详情时候保证后台不会根据当前用户所属机构过滤
                this.dataToQuery.orgId = this.currentUser.companyId
                // this.dataToQuery.categoryId = this.generaId
                this.queryAjax();
            },
            submit(name) {
                this.$set(this.dataToView, 'companyAddress', this.dataToView.companyAddressArr.join(','))
                this.submitAjax(name);
            },
            downloadDescriptionExcel(){
                // window.open('特种设备登记表模板.xls','_blank')
                this.$http.get(Api.templateDownload+'2', {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "特种设备登记表模板.xlsx" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },


            submitFile(map){
                this.$refs[map].validate((valid) => {
                    if (valid) {
                        this.uploadDissabled = true
                        let formData = new FormData();
                        formData.append("file", this.map.file);
                        formData.append("companyId", this.map.companyId);
                        formData.append("categoryId", this.map.categoryId);
                        formData.append("createUserId", this.currentUser.userId);
                        formData.append("createOrgId", this.currentUser.orgInfo.orgId);
                        this.$http.post(this.uploadUrl, formData).then((res) => {
                            this.uploadDissabled = false
                            if (res.data.status == "200") {
                                // this.$Message.success("特种设备导入成功! 导入详情请查看控制台");
                                this.logInfoModel = true
                                this.logInfo = res.data.data
                                this.query()
                            } else {
                                this.$Message.error(res.data.msg);
                            }
                            this.map={}
                            this.fileTrue = false
                            this.model3=false
                        }).catch(e => {
                            console.log(e);
                            this.model3=false
                            this.map={}
                            this.uploadDissabled = false
                            this.$Message.error("导入失败！请检查导入文档的格式是否正确");
                        })
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })

            },
            handleUpload (file) {
                this.map.file = file;
                this.fileTrue = true
                return false;
            },
            cancelMap(){
                this.model3 = false
                this.fileTrue = false
                this.map ={}
                this.$refs.orgCascader1.resetCurrentOrg();
            },
            beachUpload(){
                this.model3 = true
                this.fileTrue = false
                this.map ={}
                this.$refs.orgCascader1.resetCurrentOrg();
            },
            setCompanyId1(data) {
                if (data && data instanceof Array && data.length > 0) {
                    this.$set(this.map, 'companyId', data[data.length - 1])
                    // if(this.$refs.dialogForm) this.$refs.dialogForm.validateField('companyId')
                }
            },
            setCompanyName1(data) {
                if (data) {
                    this.map.companyName = data;
                    // this.$refs.dialogForm1.validateField('companyId')
                }
            },
            rowClassName(row,index){
                if (row.nextExamDate) {
                    var date = this.renderViewDate(new Date())
                    if(row.nextExamDate < date){
                        return 'table-row-red';
                    }
                }

            },
        },
        watch: {
            '$route.name': function () {
                this.statisticPage = true
                // if (this.isResult === 2) {
                //     this.tableHeight = this.tableHeight + 30;
                // } else {
                //     this.tableHeight = this.tableHeight - 30;
                // }
                this.reset()
            }
        },

    }
</script>

<style lang='css' scoped>
    .rpt-form {}

    /deep/ .rpt-form .ivu-table-wrapper {overflow: visible;}

    /deep/ .rpt-form .ivu-table-wrapper .ivu-table {overflow: visible;}
    .ivu-table-tbody .table-row-red td{background-color: #fedede !important;}
</style>
